<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>附近学员</title>

	<!-- 设置网页图标 -->
	<link rel="shortcut icon" href="images/browserLOGO2.png" type="image/x-icon" />
	<link rel="stylesheet" href="bootstrap-4.0.0/dist/css/bootstrap.css">
	<!-- 引用Bootstrap -->
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
	<link rel="stylesheet" href="css/fontawesome-all.css">
	<link rel="stylesheet" href="css/owl.theme.css" type="text/css" media="all">
	<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" media="screen" property="" />
	<link rel="stylesheet" href="css/layer-animate.css">
	<link rel="stylesheet" href="css/profilestyle.css">

	<!-- 网页字体库 -->
	<link href="http://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=devanagari,latin-ext" rel="stylesheet">
	<link href="http://fonts.googleapis.com/css?family=Tangerine:400,700" rel="stylesheet">
	<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=rsi8ehEBjC2RV6a6Nbgwt7e0RjSv8lRH"></script>
	<style type="text/css">
	/* 还原fieldset样式 */
	fieldset {
	    padding: .35em .625em .75em;
	    margin: 0 2px;
	    border: 1px solid silver;
 	}

	legend {
	    padding: .5em;
	    border: 0;
	    width: auto;
	    margin-bottom: 0px;
	 }
	 
	 #map {
		 height:550px;
		 width:100%;
	 }
	 .boxOuter{
	width: 100%;
	text-align: center;
	height: 20px;
	margin-bottom: 3px;
	}
	
	.boxInner{
		width: 50%;
		float: left;
		font-size: 15px;
	}
	</style>
	
</head>
<body>

	<!------------------------------>
	<!------------ 隐藏域  ------------>
	<input type="hidden" id="currentUid" value="${sessionScope.uid }">
	<input type="hidden" id="currentAddress" value="${sessionScope.address }">
	<!-- <input type="hidden" id="currentAddress" value="四川省成都市武侯区天府大道北966号"> -->
	<!------------------------------>

	<div class="main-sec" id="home">
		<!-------------------------------------->
		<!------------ 顶部Logo和导航栏  ------------>
		<!-------------------------------------->
		<%@include file="jsp/header.jsp" %>
		<!-------------------------------------->
		<!-------------------------------------->

		<!-- banner-text -->
		<div class="slider">
			<!-------------------------------->
			<!------------ 顶部轮播图  ------------>
			<!-------------------------------->
			<%@include file="jsp/imageAct.jsp" %>
			<!-------------------------------->
			<!-------------------------------->
			<div class="clearfix"></div>
			<!-- 下滑按钮-->
			<div class="thim-click-to-bottom">
				<div class="rotate">
					<a href="#about" class="scroll" style="width: 100%;">
						<i class="fas fa-angle-double-down"></i>
					</a>
				</div>
			</div>
			<!-- //下滑按钮-->
		</div>
	</div>

<!-- 正文正文正文正文正文正文正文正文正文正文 -->


<div class="container" style="width:80%;margin: auto;margin-top: 20px;margin-bottom: 20px">
	<fieldset>
		<legend>附近的学员</legend>
		
		<div id="map"></div>
	</fieldset>
</div>


<!-- 正文正文正文正文正文正文正文正文正文正文 -->

		<!-------------------------------------->
		<!------------- 底部Logo和版权  ------------->
		<!-------------------------------------->
		<%@include file="jsp/footer.jsp" %>
		<!-------------------------------------->
		<!-------------------------------------->


	<script src="js/jquery-2.2.3.min.js"></script>
	<script src="js/responsiveslides.min.js"></script>
	<script src="js/owl.carousel.js"></script>
	<script>
		$(function () {
			//轮播图控制
			$("#slider4").responsiveSlides({
				auto: true,
				pager: true,
				nav: false,
				speed: 1000,
				namespace: "callbacks",
				before: function () {
					$('.events').append("<li>before event fired.</li>");
				},
				after: function () {
					$('.events').append("<li>after event fired.</li>");
				}
			});
			
			//findNowUserAddress();
			
		});
		
		function findNowUserAddress(){
			$.ajax({
				url:"user/findUserByUid",
				type:"post",
				data:{
					uid:$("#currentUid").val()
					//uid:1
				},
				success:function(data){
					$("#currentAddress").val(data.address);
				}
			});
		}
	</script>
	
	<script type="text/javascript">
		var map = new BMap.Map("map");    // 创建Map实例
		map.centerAndZoom($("#currentAddress").val(), 15);  // 初始化地图,设置中心点坐标和地图级别
		//添加地图类型控件
		map.addControl(new BMap.MapTypeControl({
			mapTypes:[
	            BMAP_NORMAL_MAP,
	            BMAP_HYBRID_MAP
			]}))
		map.enableScrollWheelZoom(true);         //启用滚轮缩放
		map.enableContinuousZoom();       //启用惯性拖拽
		// 创建地址解析器实例
		var myGeo = new BMap.Geocoder();
		// 将地址解析结果显示在地图上,并调整地图视野
		var opts = {
					width : 400,     // 设置信息窗口宽度
					height: 175,   
				}
		myGeo.getPoint($("#currentAddress").val(), function(point){
			if (point) {
				//map.centerAndZoom(point, 16);
				
				var myIcon = new BMap.Icon("icon/youIcon_150p.gif", new BMap.Size(150,150));
				var marker = new BMap.Marker(point,{icon:myIcon});  // 创建标注
				map.addOverlay(marker);
			}
		},"成都市");
		
		
		$.ajax({
			url:"student/findAllStudent",
			type:"get",
			success:function(data){
				var sContent ="";
				for(var i=0;i<data.length;i++){
					var po=data[i];
					var sContent =
						"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>学员简讯<a href='javascript:void(0)' onclick='showStudentDetail(\""+po.nickName+"\","+po.uid+",\""+po.uphone+"\",\""+po.umail+"\",\""+po.headImage+"\",\""+po.address+"\","+po.sid+","+po.publicLevel+","+po.sage+",\""+po.ssex+"\",\""+po.sname+"\")' style='font-size:11px'>&nbsp&nbsp&nbsp&nbsp查看详情>></a></h4>" + 
						"<div style='float:right;margin:4px;width:109px;height:109px;'><img class='img-fluid rounded-circle img-thumbnail' style='height:100%' src='images/show1.jpg' title='天安门'/></div>" + 
						"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>昵称："+po.nickName+"</p>" + 
						"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>地址："+po.address+"</p>" + 
						"<button type='button' class='btn btn-primary' style='font-size: 13px' onclick='follow("+po.uid+")'>" + 
						"<span class='glyphicon glyphicon-plus'></span> 关注" + 
						"</button>" + 
						"</div>";
					findAdd(sContent, data[i].address);
				}
			}
		});	
		
		//学员详细信息弹窗
		function showStudentDetail(nickName,uid,uphone,umail,headImage,address,sid,publicLevel,sage,ssex,sname){
			//alert(nickName+";"+uid+";"+uphone+";"+umail+";"+headImage+";"+address+";"+sid+";"+publicLevel+";"+sage+";"+ssex+";"+sname)
			var changeMes="";
			if(publicLevel==0){
				changeMes+='<div class="container">'
					 +'<div class="boxOuter"><div class="boxInner">昵称：</div><div class="boxInner">'+nickName+'</div></div>';
					 if(ssex=="男"){
						 changeMes+='<div class="boxOuter"><div class="boxInner">姓名：</div><div class="boxInner">'+sname.substr(0,1)+'先生</div></div>';
					 }else{
						 changeMes+='<div class="boxOuter"><div class="boxInner">姓名：</div><div class="boxInner">'+sname.substr(0,1)+'女士</div></div>';
					 }
					 changeMes+='<div class="boxOuter"><div class="boxInner">年龄：</div><div class="boxInner">'+sage+'</div></div>'
					 +'<div class="boxOuter"><div class="boxInner">联系电话：</div><div class="boxInner">'+uphone+'</div></div>';
					 if(umail!="unKnown"){
						 changeMes+='<div class="boxOuter"><div class="boxInner">邮箱：</div><div class="boxInner">'+umail+'</div></div>';
					 }
					 changeMes+='<div class="boxOuter"><div class="boxInner">交易完成次数:</div><div class="boxInner"><span id="finishOrder"></span>次</div></div>'
					 +'<div class="boxOuter"><div class="boxInner">好评次数:</div><div class="boxInner"><span id="positiveComment"></span>次</div></div>'
					 +'<div class="boxOuter">'
					 +'<form action="/chat/chatWindow" style="float:left;margin-left:15px;">'
					 +'<input type="hidden" name="talkerUid" value="'+uid+'">'
					 +'<input type="hidden" name="currentUid" value="'+$("#currentUid").val()+'">'
					 +'<input type="submit" class="profile-card__button button--blue js-message-btn" style="min-width: 150px;min-height:40px;height:40px;font-size:15px;line-height:15px;" value="发起会话"/>'
					 +'</form>'
					 +'<input type="button" class="profile-card__button button--orange" style="min-width: 150px;min-height:40px;height:40px;font-size:15px;line-height:15px;" value="给TA留言"/>'
					 +'</div>'
					 +'</div>';
				var obj={
					type:"showSweetAlert",
					title:"学员详情",
					content:changeMes,
					area:["600px","300px"]
				};
			}else if(publicLevel==1){
				changeMes+='<div class="container">'
					 +'<div class="boxOuter"><div class="boxInner">昵称：</div><div class="boxInner">'+nickName+'</div></div>';
					 if(ssex=="男"){
						 changeMes+='<div class="boxOuter"><div class="boxInner">姓名：</div><div class="boxInner">'+sname.substr(0,1)+'先生</div></div>';
					 }else{
						 changeMes+='<div class="boxOuter"><div class="boxInner">姓名：</div><div class="boxInner">'+sname.substr(0,1)+'女士</div></div>';
					 }
					 changeMes+='<div class="boxOuter"><div class="boxInner">交易完成次数:</div><div class="boxInner"><span id="finishOrder"></span>次</div></div>'
					 +'<div class="boxOuter"><div class="boxInner">好评次数:</div><div class="boxInner"><span id="positiveComment"></span>次</div></div>'
					 +'<div class="boxOuter">'
					 +'<form action="/chat/chatWindow"  style="float:left;margin-left:15px;">'
					 +'<input type="hidden" name="talkerUid" value="'+uid+'">'
					 +'<input type="hidden" name="currentUid" value="'+$("#currentUid").val()+'">'
					 +'<input type="submit" class="profile-card__button button--blue js-message-btn" style="min-width: 150px;min-height:40px;height:40px;font-size:15px;line-height:15px;" value="发起会话"/>'
					 +'</form>'
					 +'<input type="button" class="profile-card__button button--orange" style="min-width: 150px;min-height:40px;height:40px;font-size:15px;line-height:15px;" value="给TA留言"/>'
					 +'</div>'
					 +'</div>';
				var obj={
					type:"showSweetAlert",
					title:"学员详情",
					content:changeMes,
					area:["600px","250px"]
				};
			}else{
				changeMes+='<div class="container">'
					 +'<div class="boxOuter"><div class="boxInner">昵称：</div><div class="boxInner">'+nickName+'</div></div>';
					 changeMes+='<div class="boxOuter"><div class="boxInner">交易完成次数:</div><div class="boxInner"><span id="finishOrder"></span>次</div></div>'
					 +'<div class="boxOuter"><div class="boxInner">好评次数:</div><div class="boxInner"><span id="positiveComment"></span>次</div></div>'
					 +'<div class="boxOuter">'
					 +'<form action="/chat/chatWindow"  style="float:left;margin-left:15px;">'
					 +'<input type="hidden" name="talkerUid" value="'+uid+'">'
					 +'<input type="hidden" name="currentUid" value="'+$("#currentUid").val()+'">'
					 +'<input type="submit" class="profile-card__button button--blue js-message-btn" style="min-width: 150px;min-height:40px;height:40px;font-size:15px;line-height:15px;" value="发起会话"/>'
					 +'</form>'
					 +'<input type="button" class="profile-card__button button--orange" style="min-width: 150px;min-height:40px;height:40px;font-size:15px;line-height:15px;" value="给TA留言"/>'
					 +'</div>'
					 +'</div>';
				var obj={
					type:"showSweetAlert",
					title:"学员详情",
					content:changeMes,
					area:["600px","200px"]
				};
			}
		    method.msg_layer(obj);
		    findOrderCount(sid);
		    findPositiveCount(sid);
		}
		
		
		//查询学员交易完成次数
		function findOrderCount(sid){
			$.ajax({
				url:"student/findOrderCount",
				type:"post",
				data:{
					sid:sid
				},
				success:function(data){
					$("#finishOrder").html(data);
				}
			});
		}
		
		//关注
		function follow(uid){
			$.ajax({
				url:"user/addFollow",
				type:"post",
				data:{
					currentUid:$("#currentUid").val(),
					follower:uid
				},
				success:function(data){
					alert(data);
				}
			});
		}
		
		//查询学员好评次数
		function findPositiveCount(sid){
			$.ajax({
				url:"student/findPositiveCount",
				type:"post",
				data:{
					sid:sid
				},
				success:function(data){
					$("#positiveComment").html(data);
				}
			});
		}
		
		function findAdd(sContent,address){
			myGeo.getPoint(address, function(point){
				if (point) {
					var marker = new BMap.Marker(point);
					map.addOverlay(marker);
					addClickHandler(sContent,marker);
				}
			},"成都市");
		}
		
		function addClickHandler(content,marker){
			marker.addEventListener("click",function(e){
				var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
				openInfo(e,infoWindow)}
			
			);
		}
		
		function openInfo(e,infoWindow){
			var p = e.target;
			var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
			//var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
			map.openInfoWindow(infoWindow,point); //开启信息窗口
		}
	
	</script>
	
	<script src="js/SmoothScroll.min.js"></script>
	<!-- 页面跳转至顶部 -->
	<script src="js/move-top.js"></script>
	<script src="js/easing.js"></script>
	<script src="js/skater.js"></script>
	<script type="text/javascript" src="js/method.js"></script>
	<script src="js/bootstrap.js"></script>

</body>
</html>